<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <!-- <el-form>
          <el-form-item>
            <el-select v-model="chooseTableName" @change="getColumn">
              <el-option
                v-for="item in table"
                :key="item.table_NAME"
                :value="item.table_NAME"
                :label="item.table_comment"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form> -->

        <div class="floatform">
          <p>自研报表设计器</p>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleCharts"
            >插入图表</el-button
          >
          <el-form
            label-width="80px"
            :model="formdata"
            class="form-style"
            v-show="updateform"
          >
            <el-form-item label="数据集">
              <el-select
                v-model="formdata.para[0]"
                @change="getColumn"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in table"
                  :key="item.tablename"
                  :value="item.tablename"
                  :label="item.tableComment"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类属性">
              <el-select v-model="formdata.para[1]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值属性">
              <el-select v-model="formdata.para[2]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值属性2" v-show="valueProperties2">
              <el-select v-model="formdata.para[3]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值属性3" v-show="valueProperties3">
              <el-select v-model="formdata.para[4]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值属性4" v-show="valueProperties4">
              <el-select v-model="formdata.para[5]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值属性5" v-show="valueProperties5">
              <el-select v-model="formdata.para[6]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值属性6" v-show="valueProperties6">
              <el-select v-model="formdata.para[7]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="系列属性" v-show="seriesProperties">
              <el-select v-model="formdata.para[3]" placeholder="请选择">
                <el-option
                  v-for="item in column"
                  :key="item.columnname"
                  :label="item.columnname + '   ' + item.columncomment"
                  :value="item.columnname"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-button type="primary" @click="updatechart()">修改</el-button>
            <el-button @click="reset()">重置</el-button>
            <el-button type="danger" @click="deletethischat()">删除</el-button>
          </el-form>
        </div>

        <!-- <vuedraggable class="wrapper" v-model="column">
          <transition-group>
            <div v-for="item in column" :key="item.column_NAME" class="item">
              <p>{{item.column_COMMENT}}</p>
            </div>
          </transition-group>
        </vuedraggable> -->
      </el-col>

      <el-col :span="18" :offset="6">
        <!-- <div id="main" style="width: 800px; height: 600px"></div>
        <div id="main2" style="width: 800px; height: 600px"></div> -->
        <div
          style="width: 800px; height: 600px"
          v-for="item in chartinthisform"
          :key="item.chartId"
          :id="'chart' + item.chartId"
          @click="showupdateform(item)"
        ></div>
      </el-col>
    </el-row>

    <!-- 添加或修改插入图片对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <!-- 获取图表类别 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in charttype"
          :key="item"
          :value="item"
          :label="item"
          :name="item"
        >
          <!-- 获取每个图表类别下的图表 -->
          <el-col
            :span="4"
            v-for="(chart, index) in chartoftype"
            :key="index"
            :offset="1"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              shadow="hover"
              class="card"
              @click.native="insIntoFoCh(chart.chartName)"
            >
              <!-- 图标类别图片 -->
              <img
                :src="require('../../../assets/images/' + chart.chartPicpath)"
                class="image"
              />
              <div style="padding: 14px">
                <span>{{ chart.chartName }}</span>
                <div class="bottom clearfix"></div>
              </div>
            </el-card>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTablesInDataBase,
  getTablesColumn,
  getChartType,
  getChartlist,
  initForm,
  insertIntoFormChart,
  updateFormChart,
  deleteFormChart,
} from "@/api/formdesigner/formdesigner";
// import {  } from "@/api/formdesigner/pollution";
import vuedraggable from "vuedraggable";
import * as echarts from "echarts";

export default {
  name: "formdesigner",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //暂存当前选中图表
      tempchart: "",

      picpath: "",
      chartinthisform: [],
      table: [],
      charttype: [],
      chartoftype: [],
      column: [],
      chart: [],

      activeName: "折线图",

      updateform: false,
      seriesProperties: false,
      valueProperties2: false,
      valueProperties3: false,
      valueProperties4: false,
      valueProperties5: false,
      valueProperties6: false,

      formdata: {
        para: [],
      },
    };
  },
  created() {
    // console.log("createdbegin");
    //初始化该报表的表格
    this.initfo(this.$route.query.index);
    //获取数据库中的表
    this.getTable();
    //获取插入图表中的图表种类
    this.getChType();
    //加载插入图表部分一点开的初始化部分(未完成)
    this.getChOfType("折线图");

    // if (this.chartinthisform.length > 0) {
    //   this.drawthisform();
    // }
    // this.getlineCh();
    // this.getStackedColumnCh();
    // console.log("createdend");
  },
  mounted() {
    // console.log("mountedbegin");
    // this.drawthisform(this.$route.query.index);
    // console.log("mountedend");
  },
  updated() {
    // console.log("更新");
    // location.reload();
  },
  methods: {
    //初始化报表
    initfo(id) {
      // console.log("进入初始化"+id)
      let data = {
        formId: id,
      };
      initForm(data).then((res) => {
        this.chartinthisform = res.data;
        console.log("初始化", this.chartinthisform);
        this.drawthisform();
      });
    },
    // 展示修改栏(侧栏)
    showupdateform(item) {
      this.updateform = true;
      this.tempchart = item;
      this.formdata.para = item.paralist;
      if (item.chartType == "堆叠柱状图" || item.chartType == "多数据柱状图") {
        this.seriesProperties = true;
        this.valueProperties2 = false;
        this.valueProperties3 = false;
        this.valueProperties4 = false;
        this.valueProperties5 = false;
        this.valueProperties6 = false;
      } else if (item.chartType == "折线柱状图") {
        this.seriesProperties = false;
        this.valueProperties2 = true;
        this.valueProperties3 = false;
        this.valueProperties4 = false;
        this.valueProperties5 = false;
        this.valueProperties6 = false;
      } else if (item.chartType == "基础雷达图") {
        this.seriesProperties = false;
        this.valueProperties2 = true;
        this.valueProperties3 = true;
        this.valueProperties4 = true;
        this.valueProperties5 = true;
        this.valueProperties6 = true;
      } else {
        this.valueProperties2 = false;
        this.valueProperties3 = false;
        this.valueProperties4 = false;
        this.valueProperties5 = false;
        this.valueProperties6 = false;
        this.seriesProperties = false;
      }
      if (this.formdata.para[0] != "default") {
        this.getColumn();
      }
    },
    // 插入新的图表
    insIntoFoCh(type) {
      let data = {
        formId: this.$route.query.index,
        chartName: "新建图表",
        chartType: type,
      };
      insertIntoFormChart(data)
        .then((res) => {
          console.log(res);
          this.open = false;
          location.reload();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改图表
    updatechart() {
      console.log(this.formdata);
      this.tempchart.paralist = this.formdata.para;
      updateFormChart(this.tempchart)
        .then((res) => {
          console.log(res);
          // this.drawthisform();
          location.reload();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除该图表
    deletethischat() {
      let data = {
        formId: this.$route.query.index,
        chartId: this.tempchart.chartId,
      };
      deleteFormChart(data)
        .then((res) => {
          // console.log(data);
          // console.log(res);
          location.reload();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //画这个报表内所有的图表
    drawthisform() {
      console.log(this.chartinthisform);
      console.log("drawthisform");
      for (var i = 0; i < this.chartinthisform.length; i++) {
        // console.log(this.chartinthisform[i])
        // console.log(this.chartinthisform[i].chartType)
        switch (this.chartinthisform[i].chartType) {
          case "基础折线图":
            this.handleLine(i);
            break;
          case "基础柱状图":
          case "合并累加排序柱状图":
            this.handleSimpleBar(i);
            break;
          case "堆叠柱状图":
          // this.handleStackColumn(i);
          // break;
          case "多数据柱状图":
            this.handleStackColumn(i);
            break;
          case "折线柱状图":
            this.handleLineColumnChart(i);
            break;
          case "帕累托图":
            this.handleParetoChart(i);
            break;
          case "基础饼状图":
            this.handleSimplePieChart(i);
            break;
          case "环形图":
            this.handleDoughnut(i);
            break;
          case "南丁格尔玫瑰图":
            this.handleSimpleRoseType(i);
            break;
          case "基础雷达图":
            this.handleRadar(i);
            break;
          default:
            console.log("出现未整合的图表类型");
        }
      }
    },
    getTable() {
      getTablesInDataBase().then((res) => {
        // console.log(res);
        this.table = res.data;
      });
    },
    getChType() {
      getChartType().then((res) => {
        console.log(res);
        this.charttype = res.data;
      });
    },
    getChOfType(chtype) {
      let data = {
        chartType: chtype,
      };
      getChartlist(data)
        .then((res) => {
          // console.log(data);
          this.chartoftype = res.data;
          // console.log(this.chartoftype);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    handleClick(tab, event) {
      // console.log(tab, event);
      // console.log(tab.name);
      this.getChOfType(tab.name);
    },

    //获取列属性(下拉框)
    getColumn() {
      let data = {
        tableName: this.formdata.para[0],
      };
      getTablesColumn(data).then((res) => {
        // console.log(res);
        // console.log("getColumn");
        this.column = res.data;
      });
    },
    /** 插入图表操作 */
    handleCharts() {
      this.open = true;
      this.title = "插入图表";
    },
    //渲染基础折线表
    handleLine(index) {
      this.$nextTick(function () {
        this.drawLine("chart" + this.chartinthisform[index].chartId, index);
      });
    },
    //渲染基础柱状表
    handleSimpleBar(index) {
      this.$nextTick(function () {
        this.drawSimpleBar(
          "chart" + this.chartinthisform[index].chartId,
          index
        );
      });
    },
    //渲染堆叠柱状图
    handleStackColumn(index) {
      this.$nextTick(function () {
        this.drawStackedColumnChart(
          "chart" + this.chartinthisform[index].chartId,
          index
        );
      });
    },
    //渲染折柱图
    handleLineColumnChart(index) {
      // console.log(index)
      this.$nextTick(function () {
        this.drawLineColumnChart(
          "chart" + this.chartinthisform[index].chartId,
          index
        );
      });
    },
    //渲染帕累托图
    handleParetoChart(index) {
      // console.log(index)
      this.$nextTick(function () {
        this.drawParetoChart(
          "chart" + this.chartinthisform[index].chartId,
          index
        );
      });
    },
    //渲染基础饼状图
    handleSimplePieChart(index) {
      // console.log(index)
      this.$nextTick(function () {
        this.drawSimplePie(
          "chart" + this.chartinthisform[index].chartId,
          index
        );
      });
    },
    //渲染环形图
    handleDoughnut(index) {
      // console.log(index)
      this.$nextTick(function () {
        this.drawDoughnut("chart" + this.chartinthisform[index].chartId, index);
      });
    },
    //渲染南丁格尔玫瑰图
    handleSimpleRoseType(index) {
      // console.log(index)
      this.$nextTick(function () {
        this.drawSimpleRoseType(
          "chart" + this.chartinthisform[index].chartId,
          index
        );
      });
    },
    //渲染基础雷达图
    handleRadar(index) {
      // console.log(index)
      this.$nextTick(function () {
        this.drawRadar("chart" + this.chartinthisform[index].chartId, index);
      });
    },
    //折线图
    drawLine(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        // this.echarts.init(document.getElementById(divid)).setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["采购设备价格"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          //data:
          data: this.chartinthisform[index].data.horiList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "采购设备价格",
            type: "line",
            stack: "总量",
            data: this.chartinthisform[index].data.vertList,
          },
        ],
      });
    },
    //基础柱状图
    drawSimpleBar(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        xAxis: {
          type: "category",
          data: this.chartinthisform[index].data.horiList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.chartinthisform[index].data.vertList,
            type: "bar",
          },
        ],
      });
    },
    //堆叠柱状图
    drawStackedColumnChart(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.chartinthisform[index].data.horiList,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: this.chartinthisform[index].data.vertList,
      });
    },
    //折线柱状图
    drawLineColumnChart(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: this.chartinthisform[index].data.legend,
        },
        xAxis: [
          {
            type: "category",
            data: this.chartinthisform[index].data.horiList,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.chartinthisform[index].data.legend[0],
            // min: 0,
            // max: 250,
            // interval: 50,
            // axisLabel: {
            //   formatter: "{value} ml",
            // },
          },
          {
            type: "value",
            name: this.chartinthisform[index].data.legend[1],
            splitLine: {
              show: false,
            },
            // min: 0,
            // max: 25,
            // interval: 5,
            // axisLabel: {
            //   formatter: "{value} °C",
            // },
          },
        ],
        series: [
          {
            name: this.chartinthisform[index].data.legend[0],
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: this.chartinthisform[index].data.vertList1,
          },
          {
            name: this.chartinthisform[index].data.legend[1],
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: this.chartinthisform[index].data.vertList2,
          },
        ],
      });
    },
    //帕累托图
    drawParetoChart(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: this.chartinthisform[index].data.legend,
        },
        xAxis: [
          {
            type: "category",
            data: this.chartinthisform[index].data.horiList,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.chartinthisform[index].data.legend[0],
            // min: 0,
            // max: 250,
            // interval: 50,
            // axisLabel: {
            //   formatter: "{value} ml",
            // },
          },
          {
            type: "value",
            name: this.chartinthisform[index].data.legend[1],
            splitLine: {
              show: false,
            },
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: this.chartinthisform[index].data.legend[0],
            type: "bar",
            tooltip: {
              // valueFormatter: function (value) {
              //   return value + " ml";
              // },
            },
            data: this.chartinthisform[index].data.vertList1,
          },
          {
            name: this.chartinthisform[index].data.legend[1],
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: this.chartinthisform[index].data.vertList2,
          },
        ],
      });
    },
    //基础饼状图
    drawSimplePie(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.chartinthisform[index].data.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    //环形图
    drawDoughnut(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.chartinthisform[index].data.data,
          },
        ],
      });
    },
    //南丁格尔玫瑰图
    drawSimpleRoseType(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: this.chartinthisform[index].data.data,
          },
        ],
      });
    },
    //基础雷达图
    drawRadar(divid, index) {
      echarts.init(document.getElementById(divid)).setOption({
        title: {
          text: "Basic Radar Chart",
        },
        legend: {
          data: ["Allocated Budget", "Actual Spending"],
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: this.chartinthisform[index].data.name[0] },
            { name: this.chartinthisform[index].data.name[1] },
            { name: this.chartinthisform[index].data.name[2] },
            { name: this.chartinthisform[index].data.name[3] },
            { name: this.chartinthisform[index].data.name[4] },
            { name: this.chartinthisform[index].data.name[5] },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: this.chartinthisform[index].data.data,
          },
        ],
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    reset() {
      this.formdata.para = [];
      this.column = [];
    },
  },
  components: { vuedraggable },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.image {
  width: 100%;
  height: 100px;
  display: block;
}
.font-setup {
  line-height: 1.5;
  font-size: 14px;
}
.form-style {
  margin-top: 50px;
}
.floatform {
  position: fixed;
}
</style>
